<template>
  <div class="seek-container">
        <div class="content">
        <van-nav-bar title="寻宠详情" left-arrow @click-left="router.back()" right-text="分享"/>
        <van-cell class="seeking-card">
            <div class="seeking-card-header">
                <div class="header-img">
                    <van-image round width="3rem" height="3rem" fit="cover" 
                    src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
                </div>
                <div class="header-content">
                    <div>{{ seekInfo.seekAutorName}}</div>
                    <div><span>{{ dayjs(seekInfo.seekCreateTime).format('YYYY-MM-DD HH:mm')}} </span><span> {{ seekInfo.position }}</span></div>
                </div>
            </div>

            <div class="seeking-text">
                {{ seekInfo.seekContent }}
            </div>
            <div class="seeking-img">
                <img 
                    v-for="(imgUrl, index) in seekInfo.seekImgUrl" 
                    :key="index" 
                    :src="imgUrl" 
                    :alt="'图片-' + index"
                >
            </div>
            <div class="seeking-address">
                <van-icon name="location" />
                <span>丢失地址：{{seekInfo.position}}</span>
            </div>
        </van-cell>

        <template v-if="seekComment == ''">
            <div class="noComment">
                <p>评论</p>
                <img src="../img/comment.png" alt="">
            </div>

        </template>
        <template v-else>
        <div class="commet-container">
            <p class="header"><span>评论</span> <span>&nbsp;&nbsp;({{ seekComment.length }})</span></p>
            <div class="comment" v-for="item in seekComment">
                <div class="header-img">
                    <van-image round width="3rem" height="3rem" fit="cover" 
                    src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
                </div>
                <div class="comment-content">
                    <div style="color: #7f7f7f;font-weight: bold;">{{ item.userName }}</div>
                    
                    <p>{{item.commentContent}}</p>
                    
                    <div>
                        <span style="color: #ccc;">{{ dayjs(item.commentTime).format('YYYY-MM-DD HH:mm')}} </span>
                        <span style="margin-left: 20px;color: #ccc;">回复</span>
                    </div>
                </div>
            </div>    
        </div>
        </template>
        </div>
        
        <div class="commet-publish">
            <div>
                <van-field 
                v-model="comment"
                @focus="showCount=false" 
                @blur="showCount=true" 
                style="width: 75vw; height:40px" 
                class="seeking-input" height="20px" 
                placeholder="说点什么..." 
            />
            </div>
            <!-- <div v-if="showCount"><van-icon name="comment-o" size="25"/><span>{{ seekComment.length }}</span></div> -->
            <div><van-button type="primary" round @click="handleComment">发布</van-button></div>
        </div>
    </div>
</template>

<script setup>
import { ref,computed } from 'vue'
import { onMounted } from 'vue'
import dayjs from 'dayjs'
import { useRoute,useRouter } from 'vue-router'
import { getSeekById,getSeekName,getSeekCommentById,publishComment } from '../api'
import { useUserInfoStore } from '../stores/userInfo'
import { showSuccessToast,showFailToast } from 'vant'

const userInfoStore = useUserInfoStore()
const showCount = ref(true)

const comment = ref('')

const handleComment = async ()=>{
    try {
        if(comment.value == ''){
            showFailToast('评论内容为空')
        }else{
            const obj = {}
            obj.commentContent = comment.value
            obj.seekTableId = route.query.seekTableId
            obj.userId = userInfoStore.userId
            obj.userName = userInfoStore.username
            obj.commentTime = dayjs()
            await publishComment(obj)
            showSuccessToast('发布成功')
            getComment()
            comment.value = ''
        }

    } catch (error) {
        showFailToast('发布失败！')
    }
}
const route = useRoute()
const router = useRouter()
const seekInfo = ref({
    // seekAutorName:'',
    // seekCreateTime:'',
    // seekContent:'',
    // seekImgUrl:'',
    // position:''
})
const seekComment = ref([])
// const commentCount = computed(() => seekComment.length)
const getSeekInfo = async ()=>{
    const ret = await getSeekById(route.query.seekTableId)
    // const comments = await getSeekCommentById(route.query.seekTableId)
    if(ret.seekImgUrl == '' || ret.seekImgUrl == null){
            ret.seekImgUrl = null
    }else{
        ret.seekImgUrl = ret.seekImgUrl.split(',')
    }
    seekInfo.value = ret
    // if(comments !== ''){
    //     for (const item of comments) {
    //         let obj = {}
    //         obj.userName = await getSeekName(item.userId)
    //         obj.seekCommentId = item.seekCommentId
    //         obj.commentContent = item.commentContent
    //         obj.commentTime = item.commentTime
    //         obj.replyContent = item.replyContent
    //         obj.commentTime = item.commentTime
    //         obj.replyTime = item.replyTime
    //         seekComment.value.push(obj)
    //     }
    // }
}
const getComment = async ()=>{
    const comments = await getSeekCommentById(route.query.seekTableId)
    if(comments !== ''){
        for (const item of comments) {
            console.log("aa",item);
            let obj = {}
            obj.userName = await getSeekName(item.userId)
            obj.seekCommentId = item.seekCommentId
            obj.commentContent = item.commentContent
            obj.commentTime = item.commentTime
            obj.replyContent = item.replyContent
            obj.commentTime = item.commentTime
            obj.replyTime = item.replyTime
            seekComment.value.push(obj)
        }
    }
}


onMounted(()=>{
    getSeekInfo()
    getComment()
})


</script> 

<style lang='less' scoped>
    .seek-container{
        display: flex;
        flex-direction: column;
        height: 100vh;
    }
    .content{
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* 平滑滚动 */
    }
    .seeking-card {
        
        width: 90vw;
        // height: 10vh;
        margin: 2vw 1vw;
        
        

        .seeking-card-header{
            display: flex;
            justify-content: flex-start;
            height: 3rem;

            .header-content{
                display: flex;
                flex-direction: column;
                margin-left: 1rem;

                div:first-child{
                    text-align: left;
                    font-size: 1rem;
                    color: black;
                }
            }
        }
        .seeking-text{
            text-align: left;
            padding: 10px 0;
            color: black;
            font-size: 1rem;
        }
        .seeking-img{
            display: flex;
            flex-wrap: wrap;

            img{
                display: block;
                width: 31%;
                height: 31%;
                border-radius: 8px;
                margin-bottom: 3%;
            }
            img:nth-child(3n+1){
                margin-right: 3%;
            }
            img:nth-child(3n-1){
                margin-right: 3%;
            }
        }
        .seeking-address{
            margin-top: 10px;
            text-align: left;
        }
        
    }
    .commet-container{
        .header{
            margin: 20px;
            font-size: 20px;
            font-weight: bold;
            span:last-child{
                font-size: 16px;
                color: #ccc;
            }
        }
       
        .comment{
            display: flex;
            justify-content: flex-start;
            // height: 3rem;
            margin: 20px;

            .comment-content{
                display: flex;
                width: 80vw;
                flex-direction: column;
                margin-left: 1rem;
                p{
                    margin: 10px 0px;
                }
                div:first-child{
                    text-align: left;
                    font-size: 1rem;
                    color: black;
                }
            }
        }
    }
    .commet-publish{
        // padding-bottom: calc(10px + env(safe-area-inset-bottom));
        position: sticky;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-right: 5px;

        
        .seeking-input{
            display: flex;
            align-items: baseline;
            background-color: #F7F8FA;
            border-radius: 15px;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
            
        }
    }
    .noComment{
        width: 100%;
        font-size: 20px;
        font-weight: bold;
        padding: 20px;
        box-sizing: border-box;
        img{
            margin-top: 20px;
            width: 100%;
        }
    
    }
</style>